<template>
  <view class="navigator-page">
    <!-- 按钮组：不同跳转类型 -->
    <view class="btn-group">
      <!-- 1. 跳转到新页面 -->
      <navigator url="/pages/components/navigator/Newnavigator?User=liudan&userid=010" hover-class="navigator-hover">
        <button type="default">跳转到新页面</button>
      </navigator>

      <!-- 2. 在当前页打开 -->
      <navigator url="/pages/components/navigator/Redirect" open-type="redirect">
        <button type="default">在当前页打开</button>
      </navigator>

      <!-- 3. 新建调用栈 -->
      <navigator url="/pages/components/navigator/NewCallStack/NewCallStack" hover-class="navigator-hover">
        <button type="default">新建调用栈</button>
      </navigator>

      <!-- 4. 跳转tab页面 -->
      <navigator url="/pages/tabBar/tabcompage/tabcompage" open-type="switchTab">
        <button type="default">跳转tab页面</button>
      </navigator>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  // 页面加载时触发，可接收上一页传递的参数
  onLoad(options) {
    console.log('页面加载完成', '接收参数:', options);
    // 可以在这里处理页面初始化数据
  },
  // 页面显示时触发（每次显示都会触发）
  onShow() {
    console.log('页面显示');
    // 可以在这里处理页面显示时的逻辑，如数据刷新
  },
  // 页面初次渲染完成时触发
  onReady() {
    console.log('页面初次渲染完成');
    // 可以在这里获取页面元素或执行DOM操作
  },
  // 页面隐藏时触发（如跳转至其他页面）
  onHide() {
    console.log('页面隐藏');
    // 可以在这里处理页面隐藏时的逻辑
  },
  // 页面卸载时触发（如关闭当前页面）
  onUnload() {
    console.log('页面卸载');
    // 可以在这里清理定时器或事件监听
  },
  // 监听用户下拉刷新动作
  onPullDownRefresh() {
    console.log('用户下拉刷新');
    // 下拉刷新完成后需要调用uni.stopPullDownRefresh()
    // uni.stopPullDownRefresh();
  },
  // 页面滚动到底部时触发
  onReachBottom() {
    console.log('页面滚动到底部');
    // 可以在这里实现加载更多数据的逻辑
  }
};
</script>

<style scoped>
/* 页面容器样式 */
.navigator-page {
  padding: 20rpx;
  background-color: #fff;
  min-height: 100vh;
  box-sizing: border-box;
}

/* 页面内标题样式（非顶部导航栏） */
.page-title {
  font-size: 36rpx;
  font-weight: bold;
  padding: 30rpx 0;
  color: #333; /* 标题文字设为默认深灰色，不使用蓝色 */
  text-align: center;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 30rpx;
}

/* 按钮组容器 */
.btn-group {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  padding: 0 20rpx;
}

/* 导航组件样式 */
.btn-group navigator {
  display: block;
  width: 100%;
}

/* 按钮样式（默认样式，非蓝色） */
.btn-group button {
  height: 90rpx;
  line-height: 90rpx;
  font-size: 30rpx;
  border-radius: 6rpx;
  background-color: #ffffff;
  color: #333; /* 按钮文字默认深灰色 */
  border: 1px solid #eee;
}

/* 点击高亮效果 */
.navigator-hover {
  background-color: #f0f0f0;
}
</style>